<template>
    <div class="outmain ba_f heighthv pad_20 bor_rad5">
        <div class="shuju_title mar_b20">
            <div class="shuju_title_text">
                <span>集点返红包活动列表</span>
            </div>
        </div>
        <div class="flex-bet pad_lr_20">
            <div>
                <el-button type="primary" @click="handleEdit" size="medium">创建活动</el-button>
            </div>
            <div>
            </div>
        </div>
        <div class="tabledata mar_t20">
            <el-table
                    :data="list"
                    v-loading="listLoading"
                    :element-loading-text="elementLoadingText"
                    stripe
                    style="width: 100%"
            >
                <el-table-column
                        prop="name"
                        label="活动名称"
                >
                </el-table-column>
                <el-table-column
                        prop="time"
                        label="活动时间"
                        width="280"
                >
                    <template slot-scope="scope">
                        <div>{{scope.row.startTime}}</div>
                        <div>{{scope.row.endTime}}</div>
                    </template>
                </el-table-column>
<!--                <el-table-column-->
<!--                    prop="money"-->
<!--                    label="集点任务周期"-->
<!--                >-->
<!--                  <template slot-scope="scope">-->
<!--                    <div>7天</div>-->
<!--                  </template>-->
<!--                </el-table-column>-->
                <el-table-column
                        prop="money"
                        label="顾客需集满单数"
                >
                    <template slot-scope="scope">
                        <div>{{ scope.row.orderNum }}单</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="time"
                    label="返红包金额"
                >
                  <template slot-scope="scope">
                    <div>{{ scope.row.money }}元</div>
                  </template>
                </el-table-column>
<!--                <el-table-column-->
<!--                        prop="type"-->
<!--                        label="活动对象"-->
<!--                >-->
<!--                    <template slot-scope="scope">-->
<!--                        <div v-show="scope.row.people=='1'">所有人均可领取</div>-->
<!--                        <div v-show="scope.row.people=='2'">会员可领</div>-->
<!--                        <div v-show="scope.row.people=='3'">指定标签用户可领</div>-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <el-table-column
                        prop="display"
                        label="状态"
                >
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.display" active-value="1" inactive-value="2"
                                   @change="changeSwitch(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                >
                    <template slot-scope="scope">
                        <div class="flex">
                            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="page.total"
                    :page-size="page.pagesize"
                    :current-page.sync='page.currentPage'
                    @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import {collectCouponList,modifyCollectCoupon} from "@/api/plug";

    export default {
        created() {
            this.fetchData();
        },
        data() {
            return {
                list: [],
                listLoading: true,
                selectRows: "",
                elementLoadingText: "正在加载...",
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },
            }
        },
        methods: {
            async fetchData() {
                this.listLoading = true;
                const {data, count} = await collectCouponList({page: this.page.currentPage});
                this.list = data;
                this.page.total = count;
                this.listLoading = false;
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.fetchData();
            },
            async changeSwitch(row) {
                const {msg} = await modifyCollectCoupon({id: row.id, display: row.display,type:1});
                this.$baseMessage(msg, "success");
                this.fetchData();
            },
            handleDelete(row) {
                if (row.id) {
                    this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                        const {msg} = await modifyCollectCoupon({id: row.id,type:2});
                        this.$baseMessage(msg, "success");
                        this.fetchData();
                    });
                } else {
                    if (this.selectRows.length > 0) {
                        const id = this.selectRows.map((item) => item.id);
                        this.$baseConfirm("你确定要删除选中项吗", null, async () => {
                            const {msg} = await modifyCollectCoupon({id,type:2});
                            this.$baseMessage(msg, "success");
                            this.fetchData();
                        });
                    } else {
                        this.$baseMessage("未选中任何行", "error");
                        return false;
                    }
                }
            },
            handletj(){
                this.$router.push({path: 'customertongji'})
            },
            handleEdit(row) {
                if (row.id) {
                    this.$router.push(`/jdRedlistAdd?id=${row.id}`);
                } else {
                    this.$router.push({path: 'jdRedlistAdd'})
                }
            },
        }
    }
</script>
